<template>
  <a-drawer class="form1"
            :visible="dialogVisible"
            title="历史订货"
            placement="right"
            :width="1100"
            :closable="true"
            :after-visible-change="afterVisibleChange"
            @close="handleOk()">
    <div class="title">
      <div>
        <p>买家待下单</p>
        <p>{{confirmCount.confirmCount}}</p>
        <a @click="clicklook">查看</a>
      </div>
      <div>
        <p>下单率</p>
        <p>{{confirmCount.orderRate}}%</p>
        <p class="shangsheng"
           v-if="confirmCount.orderCompareRate >= 0">月同比 <img src="../../../../assets/image/sellerHub/up.png"
               alt=""> <span>{{confirmCount.orderCompareRate}}%</span> </p>
        <p class="xiajiang"
           v-if="confirmCount.orderCompareRate < 0">月同比 <img src="../../../../assets/image/sellerHub/down.png"
               alt=""> <span>{{confirmCount.orderCompareRate}}%</span> </p>
      </div>
      <div>
        <p>逾期未确认率</p>
        <p>{{confirmCount.overdueRate}}%</p>
        <p class="shangsheng"
           v-if="confirmCount.overdueCompareRate >= 0">月同比 <img src="../../../../assets/image/sellerHub/up.png"
               alt=""> <span>{{confirmCount.overdueCompareRate}}%</span> </p>
        <p class="xiajiang"
           v-if="confirmCount.overdueCompareRate < 0">月同比 <img src="../../../../assets/image/sellerHub/down.png"
               alt=""> <span>{{confirmCount.overdueCompareRate}}%</span> </p>
      </div>
    </div>
    <div class="kong"></div>
    <div class="content">
      <div class="content-title">
        <a-input-search placeholder="零件号/商品名称/买家/操作人"
                        style="width: 322px"
                        v-model="form.keyWords"
                        @search="onSearch"
                        @change="onSearch" />
      </div>
      <div class="content-title1">

        <div>
          <a-form-model ref="form1"
                        :model="form1"
                        :label-col="labelCol"
                        :wrapper-col="wrapperCol">
            订货确认时间：<a-range-picker :placeholder="['开始时间','结束时间']"
                            v-model="form1.time"
                            @change="onChangehomeDeliveryStartTime"
                            style="width:200px">
              <a-icon slot="suffixIcon"
                      type="calendar" />
            </a-range-picker>
          </a-form-model>
        </div>

        <div @click="clicktime(1)"
             :class="{'red':Timestatus===1}">今</div>
        <div @click="clicktime(2)"
             :class="{'red':Timestatus===2}">昨</div>
        <div @click="clicktime(3)"
             :class="{'red':Timestatus===3}">最近7天</div>
        <div @click="clicktime(4)"
             :class="{'red':Timestatus===4}">过去30天</div>
        <span class="span"
              @click="reset()">重置</span>
      </div>
      <div class="content-list">
        <div class="content-list-title">历史订货数量 <span>{{amount}}</span></div>
        <a-table :columns="columns"
                 :data-source="data"
                 :pagination="false"
                 class="list-height">
        </a-table>
      </div>
    </div>

    <!-- //翻页 -->
    <div class="footer">
      <span>共 <i>{{total}}</i> 页</span>
      <pagination @pageChange="pageChange"
                  :total="total"
                  :current="form.current"></pagination>
    </div>
    <waitingOrder ref="waitingOrderPage"
                  :visible="visibles"
                  @confirmWaitingOrder="confirmWaitingOrder"
                  @cancel="visibles = false"></waitingOrder>
  </a-drawer>
</template>
<script>
import pagination from '@/components/common/pagination.vue'
import waitingOrder from "./waitingOrder";
const columns = [
  {
    title: '序号',
    align: 'center',
    width: 60,
    customRender: (text, record, index) => `${index + 1}` // 显示每一行的序号
  },
  {
    title: '订货确认时间',
    dataIndex: 'updateAt',
    width: 130,
    key: 'updateAt',
  },
  {
    title: '零件号',
    dataIndex: 'materialCode',
    key: 'materialCode',
  },
  {
    title: '商品名称',
    dataIndex: 'materialName',
    key: 'materialName',
    ellipsis: true,
  },
  {
    title: '规格',
    dataIndex: 'specifications',
    key: 'specifications',
    ellipsis: true,
  },
  {
    title: '计量单位',
    dataIndex: 'unit',
    key: 'unit',
    ellipsis: true,
  },
  {
    title: '订货数量',
    dataIndex: 'requireNum',
    key: 'requireNum',
    ellipsis: true,
  },
  {
    title: '买家',
    dataIndex: 'tenantName',
    key: 'tenantName',
    ellipsis: true,
  },
  {
    title: '操作人',
    dataIndex: 'updateName',
    key: 'updateName',
    ellipsis: true,
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park, New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 2 Lake Park, London No. 2 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },

];
export default {
  components: {
    pagination,
    waitingOrder
  },
  name: 'UserEditForm',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
  },
  data () {
    return {
      dialogVisible: false,
      Timestatus: 1,
      data,
      columns,
      total: 10,
      visibles: false,
      confirmCount: '',
      //总条数
      amount: '',
      Today: '',
      form: {
        startTime: '',
        endTime: '',
        keyWords: '',
        pageNo: 1,
        pageSize: 10,
      },
      form1: {

      },
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
    }
  },
  created () {
    this.form.startTime = new Date().format('yyyy-MM-dd hh:mm:ss').split(' ')[0]
    this.form.endTime = new Date().format('yyyy-MM-dd hh:mm:ss').split(' ')[0]
    this.Today = new Date().getTime()
  },
  methods: {
    getList () {
      this.dataStatistics()
      this.detailOfHistory()
    },
    onSearch () {
      this.detailOfHistory()
    },
    //历史订货数据统计
    dataStatistics () {
      this.$store.dispatch('request', this.$api.sellerCenter.getConfirmCount()).then(res => {
        console.log(res);
        this.confirmCount = res.result
      })

    },


    //订单确认明细历史表
    detailOfHistory () {
      this.$store.dispatch('request', this.$api.sellerCenter.getConfirmDetailPage(this.form)).then(res => {
        console.log(res);
        this.data = res.result.records
        this.amount = res.result.total
        for (var i = 0; i < this.data.length; i++) {
          this.data[i].updateAt = this.data[i].updateAt.split('.')[0]
          this.data[i].updateAt = this.data[i].updateAt.substr(0, this.data[i].updateAt.length - 3)
        }
      })

    },


    pageChange (current) {
      console.log(current);
      this.form.current = current;
    },
    afterVisibleChange (val) {

    },
    handleOk () {
      console.log(123123);
      this.$emit('confirmOrderHistory', 123);
    },
    //选择时间
    clicktime (e) {
      this.Timestatus = e
      this.form1.time = undefined
      if (e === 1) {
        this.form.startTime = new Date().format('yyyy-MM-dd hh:mm:ss').split(' ')[0]
        this.form.endTime = new Date().format('yyyy-MM-dd hh:mm:ss').split(' ')[0]
      }
      if (e === 2) {
        console.log(123);
        let Time = this.Today - 86400000
        this.form.startTime = new Date(Time).format('yyyy-MM-dd hh:mm:ss').split(' ')[0]
        this.form.endTime = new Date(Time).format('yyyy-MM-dd hh:mm:ss').split(' ')[0]
      }
      if (e === 3) {
        let num = 86400000 * 6
        let Time = this.Today - num
        this.form.startTime = new Date(Time).format('yyyy-MM-dd hh:mm:ss').split(' ')[0]
      }
      if (e === 4) {
        let num = 86400000 * 29
        let Time = this.Today - num
        this.form.startTime = new Date(Time).format('yyyy-MM-dd hh:mm:ss').split(' ')[0]
      }
      this.detailOfHistory()
    },
    //日期选择
    onChangehomeDeliveryStartTime (value, dateString) {
      this.Timestatus = ''
      this.form.startTime = dateString[0]
      this.form.endTime = dateString[1]
      this.detailOfHistory()
    },
    //重置
    reset () {
      this.Timestatus = 1
      this.form.keyWords = ''
      this.form.startTime = new Date().format('yyyy-MM-dd hh:mm:ss').split(' ')[0]
      this.form.endTime = new Date().format('yyyy-MM-dd hh:mm:ss').split(' ')[0]
      this.form1.time = undefined
      this.detailOfHistory()
    },



    //点击查看
    clicklook () {
      this.visibles = true
    },

    confirmWaitingOrder () {

    },
  },
  watch: {
    visible (newVal) {
      this.dialogVisible = newVal;
    }
  }
}
</script>
<style lang="less" scoped>
.red {
  border: 1px solid @activeRed !important;
}
.title {
  height: 138px;
  background: #fff;
  padding: 16px 24px;
  > div {
    width: 32%;
    height: 106px;
    margin-right: 2%;
    float: left;
    border: 1px solid @newBorder;
    padding-left: 100px;
    padding-top: 16px;
    > p {
      font-size: 12px;
      color: @newColorGreyFontM;
      margin-bottom: 8px;
    }
    > p:nth-child(2) {
      font-size: 22px;
      font-weight: 700;
      color: @newColorGreyFontM;
      height: 26px;
      line-height: 26px;
    }
    > p:nth-child(3) {
      color: @newColorGreyFont;
    }
    > a {
      color: @newBlue;
      cursor: pointer;
      font-size: 12px;
    }
  }
  > div:nth-child(3) {
    margin-right: 0;
  }
}
.kong {
  height: 16px;
  background: @greyBackground;
}
.content {
  min-height: calc(100% - 155px);
  .content-title {
    height: 64px;
    padding: 16px 24px;
    text-align: right;
  }
  .content-title1 {
    width: 1052px;
    height: 64px;
    border-radius: 2px;
    box-shadow: 0px 0px 6px 1px rgba(39, 36, 36, 0.06);
    padding: 16px;
    margin-left: 24px;
    margin-bottom: 16px;
    > div {
      font-size: 12px;
      float: left;
      height: 32px;
      padding: 0 10px;
      line-height: 30px;
      margin-right: 8px;
      border: 1px solid @newBorderS;
      cursor: pointer;
      color: @newColorGreyFontM;
    }
    > div:nth-child(1) {
      border: none;
    }
    .span {
      float: right;
      margin-top: 7px;
      font-size: 12px;
      cursor: pointer;
    }
  }
  .content-list {
    padding: 0 24px 56px;
    min-height: calc(100% - 155px);
    .content-list-title {
      margin-bottom: 16px;
      font-size: 12px;
      color: @newColorGreyFontM;
      span {
        font-size: 22px;
        font-weight: 700;
        color: @activeRed;
      }
    }
  }
}
.footer {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 1100px;
  height: 56px;
  text-align: right;
  padding: 16px 24px;
  background: #fff;
  span {
    font-size: 12px;
    color: @newColorGreyFont;
    margin-right: 12px;
    i {
      font-size: 12px;
      color: @newColorGreyFontM;
      font-style: normal;
      color: @activeRed;
    }
  }
}

.shangsheng {
  img {
    width: 12px;
    height: 12px;
    vertical-align: text-bottom;
    margin-right: 3px;
    margin-left: 4px;
  }
  span {
    color: #79c860;
  }
}
.xiajiang {
  img {
    width: 12px;
    height: 12px;
    vertical-align: text-bottom;
    margin-right: 3px;
    margin-left: 4px;
  }
  span {
    color: #ed1b2c;
  }
}
/deep/ .ant-drawer-body {
  padding: 0;
  height: calc(100% - 55px);
}
/deep/ .ant-input {
  font-size: 12px;
}

/deep/ .ant-table-thead > tr > th {
  border-bottom: 1px solid @newBorder !important;
  padding: 11px 16px !important;
  font-size: 12px;
  background: #fafafa;
}
/deep/ .ant-table-tbody {
  font-size: 12px;
}
/deep/ .ant-table-tbody > tr > td {
  border-bottom: 1px solid @newBorder !important;
  padding: 11px 16px !important;
}
</style>